<template>
	<view class="p-2 bg-white record">
		<view class="flex j-center mb-3">
			<u-tabs :list="listTab" :current="currentTabs" @click="clickTabs"></u-tabs>
		</view>
		<view class="bg-white mb-3 flex a-center j-sb input_view">
			<view class="span-10 ">
				<u--input type="text" v-model="query.keyword" placeholder="手机型号/商品编码查询" fontSize="12px"
					@confirm="searchList" maxlength="50" confirmType="search" @blur="searchList"></u--input>
			</view>
			<view class="p-1"></view>
			<view class="flex-1" @click="showCalendar=true">
				<view class="time" v-if="!query.beginDate">开始时间~结束时间</view>
				<view class="time time2" v-else>{{query.beginDate}}~{{query.endDate}}</view>
				<!-- <u--input type="text" v-model="query.subrackDesc" placeholder="开始时间~结束时间" fontSize="12px"
					@confirm="searchList" maxlength="50" confirmType="search"  
					@clear="clearSearch"></u--input> -->
			</view>
		</view>

		<view class="p-1" v-if="listsData.length!=0">
			<view class="py-1 px-2 border rounded-10 mb-2" v-for="(item,index) in listsData" :key="index"
				@click="navigateTo('pages/warehouse/product/detail?productCode='+item.productCode)">
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">所在仓库：</view>
					<view class="flex-1">{{item.warehouseName}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">商品编码：</view>
					<view class="flex-1">{{item.productCode}}</view>
					<image src="@/static/images/fuzhi.png" mode="widthFix" class="svgmini ml-3"
						@click.stop="utils.setClipboardData(item.productCode)"></image>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机型号：</view>
					<view class="flex-1">{{item.phoneModel}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">手机品牌：</view>
					<view class="flex-1">{{item.phoneBrand}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">内存：</view>
					<view>{{item.memory?item.memory:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">颜色：</view>
					<view class="flex-1">{{item.colour?item.colour:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2" >
					<view class="text-right col-170">IMEI：</view>
					<view class="flex-1">{{item.imei?item.imei:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">机况：</view>
					<view class="flex-1">{{biddingInfo.subrackDesc?biddingInfo.subrackDesc:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">库龄：</view>
					<view class="flex-1">{{item.storageAge?item.storageAge:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">成本价：</view>
					<view class="flex-1">{{item.costPrice?item.costPrice:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2">
					<view class="text-right col-170">销售价：</view>
					<view class="flex-1">{{item.salePrice?item.salePrice:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2" v-if="item.saleTypeCode=='outbound'">
					<view class="text-right col-170">客户名称：</view>
					<view class="flex-1">{{item.customerName?item.customerName:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2" v-if="item.saleTypeCode=='outbound'">
					<view class="text-right col-170">销售时间：</view>
					<view class="flex-1">{{parseTime(item.saleTime)}}</view>
				</view>
				<view class="flex j-start a-center my-2" v-if="item.saleTypeCode=='return'">
					<view class="text-right col-170">退货价：</view>
					<view class="flex-1">{{item.returnPrice?item.returnPrice:'--'}}</view>
				</view>
				<view class="flex j-start a-center my-2" v-if="item.saleTypeCode=='return'">
					<view class="text-right col-170">退货时间：</view>
					<view class="flex-1">{{parseTime(item.returnTime)}}</view>
				</view>
				<view class="flex j-end a-center my-2" v-if="item.saleTypeCode=='outbound'&&item.isAdd==0">
					<view class="btn" @click.stop="handleEdit(index,item)">退货</view>
				</view>
			</view>
		</view>

		<empty v-else />


		<!-- 填写退货价 -->
		<u-popup :show="showPopup" @close="showPopup=false" mode="center" :round="10" closeable
			:closeOnClickOverlay="false">
			<view class="col-11 py-5 px-4">
				<view class="flex j-start mb-4 mt-5 pt-2 a-center">
					<view class="text-right font-md">退货价：</view>
					<view class="flex-1">
						<u--input v-model="returnPrice" placeholder="请输入请输入退货价" border="surround"
							fontSize="13px"></u--input>

					</view>
				</view>
				<view class="btn m-o col-5 rounded-40" style="height: 70rpx;" @click="handleSubmit">提交</view>

			</view>
		</u-popup>


		<u-calendar :show="showCalendar" :monthNum="50" :minDate="minDate" :maxDate="maxDate" mode="range"
			@confirm="confirmCalendar" @close="closeCalendar" :allowSameDay="true"></u-calendar>

	</view>
</template>

<script>
	import {
		saleRecordList,
		retunSalePrice
	} from '@/common/api/sales.js'
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		name: "",
		mixins: [],
		data() {
			return {
				currentTabs: 0,
				listTab: [{
					name: '销售记录',
					value: 'outbound'
				}, {
					name: '退货记录',
					value: 'return'
				}],
				showPopup: false,
				returnPrice: '',
				// saleTypeCode: outbound 销售记录, return 退货, damage 报损
				query: {
					saleTypeCode: 'outbound',
					keyword: '',
					beginDate: '',
					endDate: ''
				},
				currentIndex: null,
				showCalendar: false,
				maxDate: `${year+1}-${month}-${date}`,
				minDate: `${year-1}-${month}-${date}`,
			}
		},
		onLoad(option) {
			this.searchList();
		},
		onPullDownRefresh() {
			this.searchList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (!this.isLoadMore) {
				this.isLoadMore = true;
				this.query.pageNo += 1;
				this.getLists();
			}
		},
		watch: {},
		computed: {},
		methods: {
			searchList() {
				this.isLoadMore = false;
				this.listsData = [];
				this.query.pageNo = 1;
				this.getLists();
			},
			confirmCalendar(val) {
				this.query.beginDate = val[0]
				this.query.endDate = val[val.length - 1];
				this.searchList();
				this.showCalendar = false
			},
			closeCalendar() {
				this.query.beginDate = ''
				this.query.endDate = '';
				this.searchList();
				this.showCalendar = false
			},
			clickTabs(val) {
				this.query.saleTypeCode = val.value;
				this.searchList();
			},
			getLists() {
				saleRecordList(this.query).then(res => {
					if (res.data && res.data.list.length == 0) {
						let oldLoad = {}
						this.isLoadMore = true;
						oldLoad = Object.assign({}, this.query);
						oldLoad.pageNo = this.query.pageNo;
						this.query = oldLoad
						this.$forceUpdate()
						return
					}

					this.isLoadMore = false;
					let oldList = this.listsData || [];
					oldList.push(...res.data.list);
					this.listsData = oldList
				})
			},
			handleEdit(index, item) {
				this.currentIndex = index;
				this.showPopup = true;
				if (item.returnPrice) {
					this.returnPrice = item.returnPrice
				} else {
					this.returnPrice = ''
				}
			},
			handleSubmit() {
				let data = this.listsData[this.currentIndex]
				data.returnPrice = this.returnPrice;
				retunSalePrice({
					id: data.id,
					formawarehousid: data.formawarehousid,
					returnPrice: this.returnPrice
				}).then(res => {
					uni.$u.toast('提交成功');
					this.searchList();
					this.showPopup = false;
					this.returnPrice = ''
				})

			}
		}
	}
</script>

<style lang="scss">
	.colorF {
		color: #4F4F4F;
	}

	.input_view {
		.u-input {
			padding: 8rpx 10rpx !important;
		}
	}

	.record {
		/deep/.u-tabs__wrapper__nav__item {
			padding: 0 20px !important;
		}
	}

	.time {
		padding: 8rpx 10rpx !important;
		line-height: 24px;
		font-size: 12px;
		border: 1px solid #dadbde;
		border-radius: 6px;
		color: #c0c4cc;
	}

	.time2 {
		color: #333;
	}
</style>